<template lang="html">
  <div class="imgs">
    <UpImg ref="upImg" @upSuccess="upImgSuccess" />
    <mu-expansion-panel>
      <div slot="header">添加图片</div>
      <mu-button color="primary" @click="$refs.upImg.click()" full-width>添加图片</mu-button>
    </mu-expansion-panel>

    <mu-data-table stripe border :columns="columns" :loading="loading" :sort.sync="sort" @sort-change="handleSortChange" :data="listDatas">
      <template slot-scope="scope">
        <td @click="update('update', scope, 'number')">{{scope.row.number}}</td>
        <td @click="update('is_show', scope)">{{scope.row.is_show ? '显示中' : '隐藏中'}}</td>
        <td><img style="width: 100%;" :src="scope.row.img_url" alt="图片"></td>
        <td @click="update('update', scope, 'title')">{{scope.row.title}}</td>
        <td>
          <mu-button color="primary" @click="update('update', scope, 'title')">更改标题</mu-button>

          <mu-button v-if="scope.row.is_show" color="#607d8b" @click="update('is_show', scope)">点击隐藏</mu-button>
          <mu-button v-else color="#ff9800" @click="update('is_show', scope)">点击显示</mu-button>

          <mu-button color="success" @click="update('update', scope, 'number')">修改排序</mu-button>
          <mu-button color="error" @click="update('delete', scope)">删除</mu-button>
        </td>
      </template>
    </mu-data-table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      type: null,
      url: null,
      loading: true,
      listDatas: [],
      sort: {
        name: '',
        order: 'asc'
      },

      columns: [
        { title: '显示顺序', name: 'number', sortable: true, tooltip: '越大越靠前', width: '120' },
        { title: '是否显示', name: 'is_show', sortable: true, width: '120' },
        { title: '图片', name: 'img_url', width: '300' },
        { title: '标题', name: 'title' },
        { title: '操作', name: 'action', width: '420' },
      ],
    }
  },
  watch: {
    '$route': 'fetchData',
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      let type = this.$route.params.type

      this.loading = true
      this.listDatas = []
      this.url = '/imgs/' + type
      this.type = type
      this.get()
    },
    get() {
      this.$Toast('正在获取中')
      this.loading = true
      flyio.get(this.url).then((res) => {
        this.listDatas = res
        this.loading = false
      })
    },
    update(type='update', info, name=null) {
      let id = info.row.id,
          $index = info.$index

      if (type == 'delete') {
        this.$confirm('将删除 (' + info.row.title + ')', '确定要删除？').then(({result}) => {
          if (result) {
            this.$Toast('正在删除')
            Vue.delete(this.listDatas, $index)
            flyio.put(this.url, {
              id,
              name: 'delete',
            }).then((res) => {
              this.$Toast('删除完成')
            })
          }
        })
      } else if (type == 'is_show') {
        let value = !info.row.is_show
        this.listDatas[$index].is_show = value
        flyio.put(this.url, {
          id,
          name: 'is_show',
          value,
        }).then((res) => {
          this.$Toast('更新完成')
        })
      }  else {
        this.$prompt(name, '正在修改', {
          content: name == 'title' ? '标题' : '排序(越大越靠前)',
          inputType: name == 'title' ? 'text' : 'number',
          inputValue: info.row[name],
        }).then(({result, value}) => {
          if (result) {
            this.listDatas[$index][name] = value
            flyio.put(this.url, {
              id,
              name,
              value,
            }).then((res) => {
              this.$Toast('更新完成')
            })
          }
        })
      }
    },
    upImgSuccess(img_url) {
      this.loading = true
      flyio.post(this.url, {
        img_url,
        type: this.type,
      }).then((res) => {
        this.get()
      })
    },
    handleSortChange ({name, order}) {
      this.listDatas = this.listDatas.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
    },
  },
}
</script>

<style lang="css" scoped>
</style>
